import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import PropTypes from 'prop-types';
import styles from './banner.module.scss'

class Index extends Component {

  constructor(props) {
    super(props)
  }

  //数据校验
  static PropTypes = {
    list: PropTypes.array
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }


  showDetail = id => {
    if(id){
      Taro.navigateTo({
        url: `/pages/player/index?id=${id}`,
      })
    }
    else{
      Taro.showToast({
        title:'页面暂未开发',
        icon:'none'
      })
    }
  
  }

  render() {
    return (
      <View>
        <Swiper
          className={styles.swiper_wrapper}
          indicatorColor='#eee'
          indicatorActiveColor='#DC143C'
          circular
          indicatorDots
          autoplay>
          {
            this.props.list?this.props.list.map(banner => {
              return (
                <SwiperItem key={banner._id} className={styles.swiper_item}>
                  <View className={styles.swiper_item_body} onClick={()=>{this.showDetail(Number(banner.targetId))}}>
                    <image src={banner.imageUrl}></image>
                  </View>
                </SwiperItem>
              )
            }):''
          }
        </Swiper>
      </View>
    )
  }
}

export default Index
